A Rose chart explode/implode transition effect

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.rose.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="450" height="400">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    function transition ()
    {
        var cvs = document.getElementById('cvs');

        cvs.__object__.explode(null, function ()
        {
            visible === 1 ? drawRose2() : drawRose1();
        });
    }




    /**
    * Draws the first Rose chart
    */
    function drawRose1 ()
    {
        var cvs = document.getElementById("cvs");
        RGraph.reset(cvs);
        var rose = new RGraph.Rose({
            id: 'cvs',
            data: [4,8,6,5,3,2,9,4,2,8],
            options: {
                backgroundGrid: false,
                strokestyle: 'rgba(0,0,0,0)',
                margin: 3,
                clearto: 'white',
                textAccessible: true
            }
        }).implode();
        
        
        // A global
        visible = 1;
    }




    /**
    * Draws the second Rose chart
    */
    function drawRose2 ()
    {
        var cvs = document.getElementById("cvs");
        RGraph.reset(cvs);
        var rose = new RGraph.Rose({
            id: 'cvs',
            data: [1,8,8,8,4,6,3,2,5,6],
            options: {
                colorsSequential: true,
                backgroundGrid: false,
                strokestyle: 'rgba(0,0,0,0)',
                margin: 3,
                clearto: 'white',
                textAccessible: true
            }
        }).implode();
        
        // A global
        visible = 2;
    }

    window.onload = function ()
    {
        drawRose1();
    };
</script>